<template>
  <div>
    <ul class='main_list'>
      <li @click="resetpage"><router-link to='/article' tag='a'>博客主页</router-link></li>
      <li v-for='(item) in cateList' :key='item.id'>
        <span @click='getColumnId(item.id)'>{{item.cname}}</span>
        <ul class='minor_list'>
          <li v-for='(son) in item.son' :key='son.id' @click='getListData(son.id)'>{{son.cname}}</li>
      </ul>
      </li>
    </ul>
  </div>
</template>

<script>

import axios from 'axios'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['cateList'])
  },
  methods: {
    getListData(id) {
      console.log(id)
    },
    //获取栏目信息
    getMenusListData(res) {
      const result = res.data
      if (result.status === 1) {
        this.$store.commit('getMenusListData', result.cateList)
      }
    },
    //获取栏目ID
    getColumnId(id) {
      this.$store.dispatch('getColumnId', id)
    },
    //重置首页数据
    resetpage() {
      axios.post('http://97079707.com/api/index/index')
        .then((res) => {
          const result = res.data
          if (result.status === 1) {
            this.$store.commit('getArticleListData', result.data)
          }
        })
    }

  },
  mounted() {
    axios.get('http://97079707.com/api/cate/')
      .then(this.getMenusListData)
  },
}
</script>

<style scoped>
.main_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.main_list > li {
  text-align: center;
  margin-bottom: 15px;
}
.main_list > li > a {
  color: #fff;
  text-decoration: none;
  padding: 1px 5px;
  box-sizing: border-box;
}
.main_list > li > a:hover {
  background: #397;
}
.minor_list {
  transform: translateX(30px);
  transition: all 0.5s;
}
.minor_list > li {
  text-align: left;
  margin-top: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.minor_list > li:hover {
  color: #397;
}
</style>
